<%--
  Created by IntelliJ IDEA.
  User: LV
  Date: 2016/6/30
  Time: 15:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>选择分类</title>
    <script>
        $(function($) {
            var categoryIdTmp;//categoryIdTmp存储选择的分类Id,categoryValTmp分类类目信息
            $.getJSON("${ctx}/product/getClassifyList/no", function(json){
                //alert("JSON Data: " +json);
                //alert(json.length);
                for(var i in json){
                    //alert(json[i].areaName);
                    $("#ul1").append("<li id='"+json[i].categoryId+"'>"+json[i].categoryName+"</li>");
                }
                //给每个ul1下的li添加一个单机事件
                $("#ul1 li").click(function(){
                    //记录下选择的选项
                    categoryIdTmp=this.id;
//                    categoryValTmp=$("#"+this.id).text();
//                    alert(categoryIdTmp+"---"+categoryValTmp);

                    //alert("触发单击事件"+this.id);
                    //点击第一级的列表将二三级的列表全部清除
                    $("#ul2 li").remove();
                    $("#ul3 li").remove();
                    //a1的值改变时，先清除a2,a3的文本值
                    $("#a2").text("");
                    $("#a3").text("");
                    $("#a1").text($("#"+this.id).text());
                    var category1Tmp=this.id;
                    //清除所有属性，再添加选择项的属性
                    $("#ul1 li").removeAttr("class");
                    $("#"+this.id).attr("class","selected");
                    $.getJSON("${ctx}/product/getClassifyList/"+category1Tmp, function(json){
                        //alert("JSON Data: " +json);
                        //alert(json.length);
                        for(var i in json){
                            //alert(json[i].areaName);
                            $("#ul2").append("<li id='"+json[i].categoryId+"'>"+json[i].categoryName+"</li>");
                        }
                        //给每个ul2下的li添加一个单击事件
                        $("#ul2 li").click(function(){
                            categoryIdTmp=this.id;
//                            categoryValTmp=categoryValTmp+">"+("#"+this.id).text();
//                            alert(categoryIdTmp+"----"+categoryValTmp);

                            $("#ul3 li").remove();
                            //a2的文本值改变时，先清除a3的值
                            $("#a3").text("");
                            $("#a2").text(">"+$("#"+this.id).text());
                            var category2Tmp=this.id;
                            $("#ul2 li").removeAttr("class");
                            $("#"+this.id).attr("class","selected");
                            $.getJSON("${ctx}/product/getClassifyList/"+category2Tmp, function(json){
                                //alert("JSON Data: " +json);
                                //alert(json.length);
                                for(var i in json){
                                    //alert(json[i].areaName);
                                    $("#ul3").append("<li id='"+json[i].categoryId+"'>"+json[i].categoryName+"</li>");
                                }
                                //给每个ul3添加一个单击事件
                                $("#ul3 li").click(function(){
                                    categoryIdTmp=this.id;
//                                    categoryValTmp=categoryValTmp+">"+("#"+this.id).text();
//                                    alert(categoryIdTmp+"---");

                                    //清除ul3的选择项的属性，再给选择的项添加属性
                                    $("#ul3 li").removeAttr("class");
                                    $("#"+this.id).attr("class","selected");
                                    $("#a3").text(">"+$("#"+this.id).text()+">");
                                });
                            });
                        });
                    });
                });
            });
            //给btnSubmit添加一个提交的事件
            $("#btnSubmit").click(function () {
//                alert(categoryValTmp);
                location.href="${ctx}/product/savingProductClassify?cid="+categoryIdTmp;
            })
        });
    </script>

</head>
<body>
<div class="navigation">
    <div class="crumbs ">
        <i class="tm-iconfont icon-info"></i>
        <a href="//mai.taobao.com/seller_admin.htm">卖家中心</a><span>&gt;</span><a href="#200">商品管理</a><span>&gt;</span>选择分类
    </div>
    <div class="help">
        <a href="#" target="_blank">卖家交易学习专区</a>
    </div>
</div>
<div class="goods_class">
    <div class="tip_goods">
        <a class="i_btn u2" href="javascript:;">从类似商品中导入</a>该功能可以帮助你快速发布已经发布过的相似商品，省去大量的时间。
    </div>
    <div class="gc_content m-t15">
        <div class="title">选择分类</div>
        <div class="item" id="first">
            <ul id="ul1">

            </ul>
        </div>
        <div class="item" id="second">
            <ul id="ul2">
            </ul>
        </div>
        <div class="item" id="third">
            <ul id="ul3">

            </ul>
        </div>
    </div>
    <div class="gc_tip">
        <i></i>
        您选择的分类：<a id="a1"></a><a id="a2"></a><a id="a3"></a>
    </div>
</div>
<div class="tac p-t40">
    <button id="btnSubmit" class="i_btn u2">发布商品</button>
</div>

</body>
</html>
